<div id="content">

    <!-- Bread crumb is created dynamically -->
    <!-- row -->
    <div class="row">

        <!-- col -->
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
            <h1 class="page-title txt-color-blueDark text-center well">

                <!-- PAGE HEADER -->
                SmartAdmin Layout Options<br>
                <small class="text-success">Morph SmartAdmin to your need! The layout of SmartAdmin is extreamly flexible</small>
            </h1>

        </div>
        <!-- end col -->

    </div>
    <!-- end row -->

    <!--
        The ID "widget-grid" will start to initialize all widgets below 
        You do not need to use widgets if you dont want to. Simply remove 
        the <section></section> and you can use wells or panels instead 
        -->

    <!-- widget grid -->
    <section id="widget-grid" class="">

        <!-- row -->

        <div class="row">

            <!-- a blank row to get started -->
            <div class="col-sm-6">
                <!-- your contents here -->
                <div class="well text-center">
                    <h5>
                        Layout type "<strong>Navigation Minified</strong>" <br>
                        <small>
                            Add the following class(s) to body tag
                            <code>.minified</code>
                        </small>
                    </h5>
                    <h5>
                        <small>
                            <i>
                                Avalible options
                            </i>
                        </small>
                    </h5>
                    <span class="label label-default">.fixed-navigation</span>
                    <span class="label label-default">.container</span>
                    <span class="label label-default">.fixed-page-footer</span>
                    <span class="label label-default">.fixed-header</span>
                    <span class="label label-default">.fixed-ribbon</span>
                    <span class="label label-default">.smart-rtl</span>
                    <br>
                    <br>

                    <img src="styles/img/demo/layout-skins/layout-collapse.png" class="img-responsive center-block" style="box-shadow: 0px 0px 3px 0px #919191;">
                </div>
            </div>
            <div class="col-sm-6">
                <!-- your contents here -->
                <div class="well text-center">
                    <h5>
                        Layout type "<strong>Hidden Navigation</strong>" <br>
                        <small>Add the following class(s) to body tag <code>.hidden-menu</code></small>
                    </h5>
                    <h5>
                        <small>
                            <i>
                                Avalible options
                            </i>
                        </small>
                    </h5>
                    <span class="label label-default">.fixed-navigation</span>
                    <span class="label label-default">.container</span>
                    <span class="label label-default">.fixed-page-footer</span>
                    <span class="label label-default">.fixed-header</span>
                    <span class="label label-default">.fixed-ribbon</span>
                    <span class="label label-default">.smart-rtl</span>
                    <br>
                    <br>
                    <img src="styles/img/demo/layout-skins/layout-hidden.png" class="img-responsive center-block" style="box-shadow: 0px 0px 3px 0px #919191;">
                </div>
            </div>

        </div>
        <div class="row">

            <!-- a blank row to get started -->
            <div class="col-sm-6">
                <!-- your contents here -->
                <div class="well text-center">
                    <h5>
                        Layout type "<strong>Menu on Top with center content</strong>" <br>
                        <small>Add the following class(s) to body tag <code>.top-navigation .container</code></small>
                    </h5>
                    <h5>
                        <small>
                            <i>
                                Avalible options
                            </i>
                        </small>
                    </h5>
                    <span class="label label-default">.fixed-navigation</span>
                    <span class="label label-default">.fixed-page-footer</span>
                    <span class="label label-default">.fixed-header</span>
                    <span class="label label-default">.fixed-ribbon</span>
                    <span class="label label-default">.smart-rtl</span>
                    <br>
                    <br>
                    <img src="styles/img/demo/layout-skins/layout-menutop.png" class="img-responsive center-block" style="box-shadow: 0px 0px 3px 0px #919191;">
                </div>
            </div>
            <div class="col-sm-6">
                <!-- your contents here -->
                <div class="well text-center">
                    <h5>
                        Layout type "<strong>Center content with minified nav</strong>" <br>
                        <small>Add the following class(s) to body tag <code>.minified .container</code></small>
                    </h5>
                    <h5>
                        <small>
                            <i>
                                Avalible options
                            </i>
                        </small>
                    </h5>
                    <span class="label label-default">.top-navigation</span>
                    <span class="label label-default">.fixed-navigation</span>
                    <span class="label label-default">.fixed-page-footer</span>
                    <span class="label label-default">.fixed-header</span>
                    <span class="label label-default">.fixed-ribbon</span>
                    <span class="label label-default">.smart-rtl</span>
                    <br>
                    <br>
                    <img src="styles/img/demo/layout-skins/layout-collapse-minified.png" class="img-responsive center-block" style="box-shadow: 0px 0px 3px 0px #919191;">
                </div>
            </div>

        </div>
        <div class="row">

            <!-- a blank row to get started -->
            <div class="col-sm-6">
                <!-- your contents here -->
                <div class="well text-center">
                    <h5>
                        Layout type "<strong>RTL Layout</strong>" <br>
                        <small>Add the following class(s) to body tag <code>.smart-rtl</code></small>
                    </h5>
                    <h5>
                        <small>
                            <i>
                                Avalible options
                            </i>
                        </small>
                    </h5>
                    <span class="label label-default">.container</span>
                    <span class="label label-default">.hidden-menu</span>
                    <span class="label label-default">.fixed-page-footer</span>
                    <span class="label label-default">.fixed-header</span>
                    <span class="label label-default">.fixed-ribbon</span>
                    <span class="label label-default">.minified</span>
                    <br>
                    <br>
                    <img src="styles/img/demo/layout-skins/layout-rtl.png" class="img-responsive center-block" style="box-shadow: 0px 0px 3px 0px #919191;">
                </div>
            </div>
            <div class="col-sm-6">
                <!-- your contents here -->
                <div class="well text-center">
                    <h5>
                        Layout type "<strong>RTL with Menu on Top</strong>" <br>
                        <small>Add the following class(s) to body tag <code>.smart-rtl .top-navigation</code></small>
                    </h5>
                    <h5>
                        <small>
                            <i>
                                Avalible options
                            </i>
                        </small>
                    </h5>
                    <span class="label label-default">.fixed-navigation</span>
                    <span class="label label-default">.container</span>
                    <span class="label label-default">.fixed-page-footer</span>
                    <span class="label label-default">.fixed-header</span>
                    <span class="label label-default">.fixed-ribbon</span>
                    <br>
                    <br>
                    <img src="styles/img/demo/layout-skins/layout-rtl-menutop.png" class="img-responsive center-block" style="box-shadow: 0px 0px 3px 0px #919191;">
                </div>
            </div>

        </div>
        <!-- end row -->

    </section>
    <!-- end widget grid -->


</div>
